<template>
<!-- 运费 -->
  <div id="Administration">
    <div id="managements">
      <!--搜索框 -->
      <div id="manage-top">
        <button type="button" class="el-button el-button--primary" @click="additions()" v-Promise="'operation:freight:create'">
          <i class="el-icon-edit"></i><span>添加</span>
        </button>
      </div>
      <!-- 数据操作 -->
      <div id="manage-bottom">
        <el-table
          border
          :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          :key="id"
        >
          <el-table-column label="模板编号" prop="freightTemplateDO.id"></el-table-column>
          <el-table-column label="模板名称" prop="freightTemplateDO.templateName"></el-table-column>
          <el-table-column label="宝贝地址" prop="spuLocation"></el-table-column>
          <el-table-column label="发货期限">
            <template slot-scope="scope">{{scope.row.freightTemplateDO.deliveryDeadline}}天</template>
          </el-table-column>
          <el-table-column label="默认包邮门栏" prop="freightTemplateDO.defaultFreePrice">
            <template slot-scope="scope">{{scope.row.freightTemplateDO.defaultFreePrice|defaultFreePrice()}}</template>
          </el-table-column>
          <el-table-column label="默认计费首次发货数量" prop="freightTemplateDO.defaultFirstNum">
             <template slot-scope="scope">{{scope.row.freightTemplateDO.defaultFirstNum}}</template>
          </el-table-column>
          <el-table-column label="默认计费首次发货价格" prop="freightTemplateDO.defaultFirstMoney">
            <template slot-scope="scope">{{scope.row.freightTemplateDO.defaultFirstMoney|defaultFirstMoney()}}</template>
          </el-table-column>
          <el-table-column label="默认计费续件数量" prop="freightTemplateDO.defaultContinueNum">
             <template slot-scope="scope">{{scope.row.freightTemplateDO.defaultContinueNum}}件</template>
          </el-table-column>
          <el-table-column label="默认计费续件价格" prop="freightTemplateDO.defaultContinueMoney">
              <template slot-scope="scope">{{scope.row.freightTemplateDO.defaultContinueMoney|defaultContinueMoney()}}</template>
          </el-table-column>
          <el-table-column label="指定地区数量" prop="freightTemplateCarriageDOList.length"></el-table-column>
          <el-table-column align="right" label="操作" width="200px;">      
            <template slot-scope="scope">
              <el-button size="mini" @click="compile(scope.$index,scope.row)" class="kohlrabiblue" v-Promise="'operation:freight:update'">修改</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)" v-Promise="'operation:freight:delete'">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
         <!-- 添加编辑弹框 -->
      <div>
        <el-dialog :title="titleName" :visible.sync="dialogFormVisible" :fullscreen="true">
          <div class="loginRight">
            <div class="login-right">
              <el-form
                :model="ruleForm"
                status-icon
                ref="ruleForm"
                :rules="rules"
                label-width="150px"
                class="demo-ruleForm"
              >
                <el-form-item label="模板名称" prop="templateName">
                  <el-input v-model="ruleForm.templateName"></el-input>
                </el-form-item>  
                <el-form-item label="发货地址" prop="spuLocation">
                  <el-input v-model="ruleForm.spuLocation"></el-input>
                </el-form-item>  
                <el-form-item label="发货期限" prop="deliveryDeadline">
                   <el-input v-model.number="ruleForm.deliveryDeadline">
                    <template slot="append">天</template>
                 </el-input>
                </el-form-item>  
                <el-form-item label="是否包邮">
                  <el-radio-group v-model="radio">
                    <el-radio :label="3" @click.native="without()">坚决不包邮</el-radio>
                    <el-radio :label="6" @click.native="postage()">买家承担包邮</el-radio>
                    <el-radio :label="9" @click.native="exemption()">设定满额包邮</el-radio>
                  </el-radio-group>
                </el-form-item>  
                <el-form-item label="默认包邮额度" v-if="multiple" prop="defaultFreePrice" v-show="conceal">
                  <el-input placeholder="默认包邮额度" v-model="ruleForm.defaultFreePrice">
                    <template slot="append">元</template>conceal
                 </el-input>
                </el-form-item>  
                <el-form-item label="计费首次数量" prop="defaultFirstNum" v-show="conceal">
                  <el-input v-model="ruleForm.defaultFirstNum">                  
                      <template slot="append" >件
                         <el-tooltip class="item" effect="dark" content="当用户购买商品数量小于 ‘这个数’ 就支付默认首次发货价格的运费" placement="top-start">
                            <i class="el-tooltip el-icon-question item" aria-describedby="el-tooltip-5145"></i>
                         </el-tooltip>
                      </template>
                 </el-input>
                </el-form-item>  
                <el-form-item label="计费首次价格" prop="defaultFirstMoney" v-show="conceal">
                  <el-input  v-model="ruleForm.defaultFirstMoney">
                    <template slot="append">元</template>
                 </el-input>
                </el-form-item> 
                <el-form-item label="计费续费数量" prop="defaultContinueNum" v-show="conceal">
                  <el-input v-model="ruleForm.defaultContinueNum">
                    <template slot="append">件
                       <el-tooltip class="item" effect="dark" content="当用户购买数量高于 ‘首次发货数量’ 每多 N 件，就须额外支付 ‘续件价格’" placement="top-start">
                            <i class="el-tooltip el-icon-question item" aria-describedby="el-tooltip-5145"></i>
                       </el-tooltip>
                    </template>
                 </el-input>
                </el-form-item> 
                <el-form-item label="计费续费价格" prop="defaultContinueMoney" v-show="conceal">
                  <el-input v-model="ruleForm.defaultContinueMoney">
                    <template slot="append">元
                      <el-tooltip class="item" effect="dark" content="若不需要计件额外算运费，则直接填0即可" placement="top-start">
                            <i class="el-tooltip el-icon-question item" aria-describedby="el-tooltip-5145"></i>
                       </el-tooltip>
                    </template>
                 </el-input>
                </el-form-item> 
                <el-form-item label="指定地区价格">
                    <el-button type="primary" @click="region()">添加</el-button>
                </el-form-item> 
                 <el-form-item label="">
                    <el-table :data="ruleForm.freightTemplateCarriageDOList" style="width:100%">
                      <el-table-column prop="id" label="指定地区ID" v-if="!compileID"></el-table-column>
                      <el-table-column prop="designatedArea" label="指定省份">
                        <template slot-scope="scope">
                            {{scope.row.designatedArea|CarriageDOList()}}
                        </template>
                      </el-table-column>
                      <el-table-column prop="firstNum" label="首次数量"></el-table-column>
                      <el-table-column prop="firstMoney" label="首次价格"></el-table-column>
                      <el-table-column prop="continueNum" label="续件数量"></el-table-column>
                      <el-table-column prop="continueMoney" label="续件价格"></el-table-column>
                      <el-table-column prop="freePrice" label="满额包邮门栏"></el-table-column>
                      <el-table-column label="操作" align="right">
                         <template slot-scope="scope">
                          <el-button size="mini" type="danger" @click="deleteTitle(scope.$index,scope.row)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                </el-form-item> 
              </el-form>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary"  @click="affirm()">
              <div>确 定</div>
            </el-button>
          </div>
        </el-dialog>
      </div>
      <!-- 第二个弹出框 -->
        <div>
        <el-dialog :title="titleNames" :visible.sync="FormVisible" width="900px">
          <div class="loginRight">
            <div class="login-right">
              <el-form
                :model="site"
                status-icon
                ref="site"
                :rules="rules2"
                label-width="150px"
                class="demo-ruleForm"               
              > 
                <el-form-item label="包邮门栏" prop="freePrice">
                  <el-input v-model="site.freePrice">
                    <template slot="append">元</template>
                 </el-input>
                </el-form-item>  
                <el-form-item label="首次数量" prop="firstNum">
                  <el-input v-model="site.firstNum">
                    <template slot="append">件</template>
                 </el-input>
                </el-form-item>  
                <el-form-item label="首次价格"  prop="firstMoney">
                  <el-input  v-model="site.firstMoney">
                    <template slot="append">元</template>
                 </el-input>
                </el-form-item> 
                <el-form-item label="续件数量" prop="continueNum">
                  <el-input v-model="site.continueNum">
                    <template slot="append">件</template>
                 </el-input>
                </el-form-item> 
                <el-form-item label="续件价格" prop="continueMoney">
                  <el-input v-model="site.continueMoney">
                    <template slot="append">元</template>
                 </el-input>
                </el-form-item>
                <el-form-item label="指定地区" prop="designatedArea">
                  <el-checkbox-group v-model="site.designatedArea" style=" width: 700px !important;">
                    <el-checkbox  v-for="item in province" :key="item.index" :label="item"></el-checkbox>
                  </el-checkbox-group> 
                </el-form-item>  
              </el-form>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="FormVisible= false">取 消</el-button>
            <el-button type="primary" @click="confirm">
              <div>确 定</div>
            </el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import freights from "@/api/freight.js";
import qs from "qs";
export default {
  data() {
    return {
      //地区
      province:[
       '北京市','天津市','河南省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市',
      ' 江苏省','浙江省','安徽省','福建省','江西省','山东省','湖北省','湖南省','广东省',
      '广西壮族自治区','重庆市','四川省','贵州省','云南省','西藏自治区','甘肃省',
      '青海省','宁夏回族自治区','新疆维吾尔自治区','台湾省','香港特别行政区','澳门特别行政区'
      ],
      id:"",
      conceal:true,
      compileID:true,
      multiple:true, //单项布尔值
      radio:9, //单项
      search: "",
      titleName: "", //是否添加还是编辑
      titleNames:"",//二次是否添加还是编辑
      tableData: [],//渲染列表数组
      dialogFormVisible: false, //弹窗口
      FormVisible:false, 
      site: {
        freePrice:'',
        firstNum:'',
        firstMoney:'',
        continueNum:'',
        continueMoney:"",
        designatedArea:[],
      }, 
      ruleForm: {
        id:'',
        templateName:'',//模板名称
        spuLocation:'',//宝贝地址 
        deliveryDeadline:'',//发货期限
        defaultFreePrice:'',//默认满价包邮系列
        defaultFirstNum:'',//默认首费
        defaultFirstMoney:'',//默认首件数量
        defaultContinueNum:'',//默认续费
        defaultContinueMoney:"",//默认续件数量
        freightTemplateCarriageDOList:[]//特殊运费区
      },
      // 正则
      rules:{
         templateName:[
           { required: true, message: '模板名称不能为空', trigger: 'blur' }
        ],
        spuLocation:[
          { required: true, message: '发货地址不能为空', trigger: 'blur' }
        ],
         deliveryDeadline:[
           { required: true, message: '发货期限不能为空', trigger: 'blur' },
           {required: true,pattern: /^[0-9]*$/,message: "请输入整数",trigger: "blur"}
            
        ],
        defaultFreePrice:[
           { required: true, message: '默认包邮额度', trigger: 'blur' },
           {required: true,pattern: /^[0-9]*$/,message: "请输入整数",trigger: "blur"}
        ],
        defaultFirstNum:[
           { required: true, message: '计费首次数量不能为空', trigger: 'blur' },
            {required: true,pattern: /^[0-9]*$/,message: "请输入整数",trigger: "blur"}
        ],
        defaultFirstMoney:[
           { required: true, message: '计费首次价格不能为空', trigger: 'blur' },
            {required: true,pattern: /^[0-9]*$/,message: "请输入整数",trigger: "blur"}
        ],
        defaultContinueNum:[
           { required: true, message: '计费续费数量不能为空', trigger: 'blur' },
            {required: true,pattern: /^[0-9]*$/,message: "请输入整数",trigger: "blur"}
        ],
        defaultContinueMoney:[
           { required: true, message: '计费价格数量不能为空', trigger: 'blur' },
            {required: true,pattern: /^[0-9]*$/,message: "请输入整数",trigger: "blur"}
        ],
      },
      rules2:{
         // 二次弹框
         freePrice:[
           { required: true, message: '包邮门栏不能为空', trigger: 'blur' },
            {required: true,pattern: /^[0-9]*$/,message: "请输入整数",trigger: "blur"}
        ],
        firstNum:[
           { required: true, message: '首次数量不能为空', trigger: 'blur' },
            {required: true,pattern: /^[0-9]*$/,message: "请输入整数",trigger: "blur"}
        ],
        firstMoney:[
           { required: true, message: '首次价格不能为空', trigger: 'blur' },
            {required: true,pattern: /^[0-9]*$/,message: "请输入整数",trigger: "blur"}
        ],
        continueNum:[
           { required: true, message: '续件数量不能为空', trigger: 'blur' },
            {required: true,pattern: /^[0-9]*$/,message: "请输入整数",trigger: "blur"}
        ],
        continueMoney:[
           { required: true, message: '续件价格不能为空', trigger: 'blur' },
            {required: true,pattern: /^[0-9]*$/,message: "请输入整数",trigger: "blur"}
        ],
         designatedArea:[
           { required: true, message: '省份至少选择一个！', trigger: 'change' },
        ],
      }
    }
  },
  filters: {
    defaultFreePrice:function(value){
      if(value===0){
          return '包邮'
      }else if(value<0){
        return '不包邮'
      }else{
         return '满'+value/100+'元包邮'
      }
    },
    defaultFirstMoney:function(value){
       return value/100+'件'
    },
    defaultContinueMoney:function(value){
       return value/100+'元'
    },
    CarriageDOList:function(value) {
    return value+''
    }
    },
  methods: {
    // 编辑
   compile(index, row) {
      this.compileID=false
      this.forbidden = true;
      this.dialogFormVisible = true; //弹出框
      this.titleName = "修改";
      this.modalType = "update";
      this.ruleForm={...row.freightTemplateDO};
      this.ruleForm.freightTemplateCarriageDOList=row.freightTemplateCarriageDOList;
      // 判断是否包邮
        if (row.freightTemplateDO.defaultFreePrice==0) {
            this.radio=6 
            this.conceal=false        
        }else if (row.freightTemplateDO.defaultFreePrice<0) {
            this.radio=3
            this.multiple=false
            this.conceal=true        
        } else if (row.freightTemplateDO.defaultFreePrice>0) {
            this.radio=9
            this.multiple=true
            this.conceal=true    
        }
        this.ruleForm.defaultFirstMoney=this.ruleForm.defaultFirstMoney/100
        this.ruleForm.defaultFreePrice=this.ruleForm.defaultFreePrice/100
        this.ruleForm.defaultContinueMoney=this.ruleForm.defaultContinueMoney/100     
    },
    //添加
    additions() {
      this.compileID=true
      this.forbidden = false;
      this.titleName = "添加";
      this.modalType = "add";
      this.dialogFormVisible = true;
      this.ruleForm={}
      this.ruleForm.freightTemplateCarriageDOList=[]
      this.site.designatedArea = [];
      this.conceal=true
      this.radio=9  //默认满金额包邮
      this.ruleForm.defaultFreePrice=68,//默认满价包邮系列
      this.ruleForm.defaultFirstNum=1,//默认首费
      this.ruleForm.defaultFirstMoney=0,//默认首件数量
      this.ruleForm.defaultContinueNum=1,//默认续费
      this.ruleForm.defaultContinueMoney=0 //默认续件数量
    },
    //添加 
    region(){
      this.FormVisible=true
       this.titleNames = "创建添加指定地区";
       this.modalType = "add";
        this.site={ //清空
        freePrice:'',
        firstNum:'',
        firstMoney:'',
        continueNum:'',
        continueMoney:"",
        designatedArea:[],
      }  
      this.$nextTick(() => {    
      this.$refs.site.clearValidate();
      }) 
    },
    confirm(){
      // 二次弹出是否为空
       this.$refs.site.validate((valid) => {
          if (valid) {
           this.site.designatedArea = this.site.designatedArea + '' //数组转字符串
           this.ruleForm.freightTemplateCarriageDOList.push(JSON.parse(JSON.stringify(this.site)))//克隆
           this.FormVisible=false
           this.$information.success('这是一条添加成功的提示消息')
          } else {
            this.$information.error('这是一条添加失败的提示消息')
            return false;
          }
        });
    },
    without(){
     this.conceal=true
     this.multiple=false
    },
    exemption(){
      this.multiple=true
      this.conceal=true
    },
    postage(){
      this.conceal=false
    },
    // 运费数据列表
    management(){
      let _this = this;    
      freights.comments().then(function(res) { 
        _this.tableData=res.data.data       
      })
    },
    // 删除
    deleteTitle(index){   
       this.$confirm("此操作将永久删除, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
       .then(() => {
        this.ruleForm.freightTemplateCarriageDOList.splice(index, 1);
        this.$information.success('删除成功')
            });
    },
     // 删除
      handleDelete(row) {
        console.log(row)
          var _this = this;
           //   提示框
          _this.$confirm("此操作将永久删除, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
            .then(() => {
              _this.$information.success('删除成功')
              let data = {
                templateId:row.freightTemplateDO.id
              };
              freights.handleDeletec(data).then(function(res) {      
                console.log(res);
                _this.management()
              });
            });
        }, 
    affirm(){
      let _this=this;
      // 重制
      _this.$refs.ruleForm.validate((valid) => {
          if (valid) {
           _this.FormVisible=false
           _this.$information.success('这是一条添加成功的提示消息')
          } else {
            _this.$information.error('这是一条添加失败的提示消息')
            return false;
          }
        });
      if (_this.titleName === "添加") {
        freights.addition(_this.ruleForm,_this.site).then(function(res){
          console.log(res);
           if (res.data.errmsg == "成功") {
          _this.$information.success('这是一条添加成功的提示消息')
           _this.management()
           _this.dialogFormVisible = false; 
          } else {
             _this.$information.error('这是一条添加失败的提示消息') 
          }
        })
      }
      console.log(_this.radio);
      
      if (_this.titleName === "修改") {
       if (_this.radio==6) {
         _this.ruleForm.defaultFreePrice=0
          _this.ruleForm.defaultContinueMoney=0
          _this.ruleForm.defaultFirstMoney=0
       }else if (_this.radio==3) {
         _this.ruleForm.defaultFreePrice=-1
       }else{
         _this.ruleForm.defaultFreePrice=68
       }
        freights.compile(_this.ruleForm,_this.site).then(function(res){
           if (res.data.errmsg == "成功") {
           _this.management()
           _this.dialogFormVisible = false; 
           _this.$information.success('这是一条修改成功的提示消息')
          } else {
             _this.$information.error('这是一条修改失败的提示消息') 
          }
        })
      }
    }      
  },   
  created() {
    this.management();
  },
   watch:{
    //重制
    dialogFormVisible(){
      this.$nextTick(() => {    
      this.$refs.ruleForm.clearValidate();
      })
    }
  }
};
</script>

<style lang="less" scoped>
#Administration {
  width: 100%;
  height: 100%;
}
#Administration ::-webkit-scrollbar {
  width: 0px !important;
}
#managements {
  width: 90vw;
  height: 80vh;
  margin: auto;
}
/* 表格样式*/
#block {
  margin-top: 30px;
}
.kohlrabiblue {
  background: #66b1ff;
  color: #ffffff;
}
.el-table--enable-row-transition/deep/.el-table__body td {
  text-align: center;
}
.el-table/deep/th.is-sortable {
  cursor: pointer;
  text-align: center;
}
.el-table td,
.el-table/deep/th.is-leaf{
  text-align: center;
}
.el-table/deep/.cell {
  text-align: center !important;
  font-size: 12px;
}
/* 弹出框*/
.loginRight {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 0px 8px 8px 0px;
}
.login-right {
  width: 90%;
  margin: auto;
}
.login-right .el-input{
   width: 500px;
}
/*  */
 /deep/.el-form-item__content{
  width:900px !important;
   input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }
      input[type="number"] {
        -moz-appearance: textfield;
      }
}
.el-form-item .el-form-item--feedback .is-required/deep/.el-checkbox-group{
  width:4px !important;
  display: inline;
}
</style>